<template>
	<view>
		<!-- 轮播图 -->
		<swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000" style="height: 500rpx;">
			<swiper-item v-for="item in banner" :key="item.goods_id">
				<image :src="item.pics_mid_url" style="width: 100%;"></image>
			</swiper-item>
		</swiper>
		<view class="price" style="color: #FF0000;">
			￥{{detail.goods_price}}
		</view>
		<view class="con">
			<view class="">
				{{detail.goods_name}}
			</view>
			<van-icon name="star-o" />
		</view>
		<rich-text :nodes="detail.goods_introduce"></rich-text>

		<!-- GoodsAction 商品导航 -->
		<van-goods-action>
			<van-goods-action-icon icon="chat-o" text="客服" />
			<van-goods-action-icon icon="cart-o" text="购物车" :info="buynum" @click="go" />
			<van-goods-action-button color="#be99ff" text="加入购物车" @click="show=true" type="warning" />
			<van-goods-action-button color="#7232dd" text="立即购买" />
		</van-goods-action>

		<!-- Popup 弹出层 -->
		<van-popup :show="show" closeable position="bottom" custom-style="height:40%;" @close="onClose">
			<van-card :num="detail.goods_number" :price="detail.goods_price" desc="描述信息" :title="detail.goods_name"
				:thumb="detail.goods_small_logo" />

			<van-cell-group>
				<van-cell title="商品数量">
					<van-stepper :value="buynum" @change="onChange" />
				</van-cell>
			</van-cell-group>

			<van-button type="primary" block @click="addSure">确定添加</van-button>
		</van-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				banner: [],
				detail: [],
				show: false,
				buynum: 1, //购买数量
				cart: wx.getStorageSync('cart') || []
			};
		},
		onLoad(e) {
			console.log(e)
			this.getDetail(e.id)
		},
		methods: {
			//请求数据
			async getDetail(id) {
				let {
					data: res
				} = await uni.$http.get(
					"/api/public/v1/goods/detail?goods_id=" + id
				)
				console.log(res, 'detail')
				this.detail = res.message
				this.banner = res.message.pics
			},

			//点击购物车图标
			go() {
				wx.switchTab({
					url: '/pages/cart/cart'
				})
			},

			//点击关闭弹框
			onClose() {
				this.show = false
			},

			onChange(e) {
				console.log(e)
				this.buynum = e.detail
			},

			//点击确定加入购物车
			addSure() {
				var index = this.cart.findIndex(item => {
					return item.goods_id == this.detail.goods_id
				})
				console.log(index, 'index')
				if (index == -1) {
					var obj = {
						goods_id: this.detail.goods_id,
						goods_name: this.detail.goods_name,
						buynum: this.buynum,
						goods_price: this.detail.goods_price,
						goods_img: this.detail.goods_small_logo,
						flag: true
					}
					this.cart.unshift(obj)
				} else {
					this.cart[index].buynum += this.buynum
				}
				wx.setStorageSync('cart', this.cart)
				this.buynum = 1
				wx.showToast({
					title: '添加成功'
				})
				this.show = false
			}
		},
	}
</script>

<style lang="scss">
	.con {
		width: 750rpx;
		display: flex;
		justify-content: space-between;
	}
</style>
